<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('h_prefereDetalis.title1')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png" alt="">
									<div class="pc_title">{{info?info.title:''}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
							<!-- 	<div class="left" style="justify-content: flex-end;">
									<span>领取记录</span>
								</div> -->
							</div>
							<div class="conpc"  v-if="info" v-html="info.content"></div>
							<!-- <el-scrollbar>
							    <div class="scrollbar-flex-content">
									<div class="item" v-for="item in 5">
										<div class="top" :class="item == 1 ? 'select':''">
											<img src="../../assets/images/yh/item.png" alt="">
											<div class="icons" v-if="item == 1">
												<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
													</svg>
												</i>
												<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
													</svg>
												</i>
											</div>
										</div>
									</div>
							    </div>
							</el-scrollbar> -->
							<div v-if="fromData.length > 0">
								<template v-for="(item,index) in fromData" >
									<div v-if="item.type==1">
										<div class="inputlabel">
											{{item.name}}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_prefereDetalis.title2')" v-model="item.value">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div v-if="item.type==2">
										<div class="inputlabel">
											<i slot="prefix" style="color: red;line-height: 3;">*</i>{{$t('h_prefereDetalis.title3')}}{{item.name}}
										</div>
										<div class="upload_box1" @click="uploadPic(index)">
											<i v-if="!item.value" class="el-icon-plus"></i>
											<img v-else :src="item.value" />
										</div>
									</div>
								</template>
								<div class="btn" @click="submit">{{$t('h_prefereDetalis.title4')}}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24" style="padding-bottom: 300px;">
				<div class="header anquantop">
					<div class="left" @click="goback">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
							</svg>
						</i>
						<span></span>
					</div>
					<div class="title">{{info?info.title:''}}</div>
					<div class="right"></div>
				</div>
				<div class="con" v-if="info" v-html="info.content">
					
				</div>
				<div class="bottom">
					<!-- <div class="bottombox">
						<div class="list">
							<div class="item" v-for="item in 5">
								<div class="top" :class="item == 1 ? 'select':''">
									<img src="../../assets/images/yh/item.png" alt="">
									<div class="icons" v-if="item == 1">
										<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
											</svg>
										</i>
										<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
											</svg>
										</i>
									</div>
								</div>
								<div class="down" :class="item == 1 ? 'select':''">钱能/波币钱包 神秘礼金 天天发放88888元</div>
							</div>
						</div>
					</div> -->
				</div>
				<div class="newaddbox" v-if="fromData.length > 0">
					<template v-for="(item,index) in fromData" >
						<div class="balance_adress_box" v-if="item.type==1">
							<div class="adress_desc">
								{{item.name}}
							</div>
							<el-input :placeholder="$t('h_prefereDetalis.title2')" v-model="item.value">
								<i slot="prefix" style="color: red;line-height: 3;">*</i>
							</el-input>
						</div>
						<div class="balance_adress_box" v-if="item.type==2">
							<div class="adress_desc">
								<i slot="prefix" style="color: red;line-height: 3;">*</i>{{$t('h_prefereDetalis.title3')}}{{item.name}}
							</div>
							<div class="upload_box" @click="uploadPic(index)">
								<i v-if="!item.value" class="el-icon-plus"></i>
								<img v-else :src="item.value" />
							</div>
						</div>
					</template>
					
					<div class="recharge_btn" @click="submit">
						<span>{{$t('h_prefereDetalis.title4')}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		
		
	</div>
</template>

<script>
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import {
		shrinkImage
	} from "shrinkpng";
	export default{
		components: {
			PcHedaer,
			PcDrawer
		},
		data(){
			return{
				navs: [{
						id: 0,
						name: this.$t('h_prefereDetalis.title23'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('h_prefereDetalis.title24'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('h_prefereDetalis.title25'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('h_prefereDetalis.title26'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('h_prefereDetalis.title27'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name:this.$t('h_prefereDetalis.title28'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('h_prefereDetalis.title29'),
						key: 'icon_game_menu_active_8',
					},
				
					// {
					// 	id: -2,
					// 	name: this.$t('h_prefereDetalis.title30'),
					// 	key: 'icon_game_menu_active_100',
					// },
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('h_prefereDetalis.title31'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1:0,
				
				account:'',
				pic:'',
				id:'',
				info:null,
				fromData:[]
			}
		},
		created() {
			this.id = this.$route.query.id
			this.activityInfo()
		},
		methods:{
			submit(){
				
				let isNull = false;
				this.fromData.forEach((item,index)=>{
					if(isNull === false){
						if(item.value == '') isNull = item;
					}
				})
				console.log(isNull)
				if(isNull === false){
					this.$confirm(this.info.alert_msg).then(()=>{
						const loading = this.$loading({
						    lock: true,
						    text: 'Loading',
						    spinner: 'el-icon-loading',
						    background: 'rgba(0, 0, 0, 0.7)'
						});
						this.$api.push_activity({
							id:this.info.id,
							collect_data:this.fromData
						},(res)=>{
							loading.close()
							if(res.code == 0){
								this.$message.success(res.msg);
							}else{
								this.$message.error(res.msg);
							}
						})
					})
				}else{
					this.$message.error( this.$t('h_prefereDetalis.title5')+isNull.name);
				}
			},
			back1(){
				this.$router.go(-1)
			},
			openMenus(){
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus(){
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			goback(){
				this.$router.go(-1)
			},
			activityInfo(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.activityInfo({
					id:this.id
				},(res)=>{
					loading.close()
					if(res.code == 0){
						this.info = res.data
						// let collect_form = JSON.parse(res.data.collect_form);
						// collect_form.forEach((item,index)=>{
						// 	collect_form[index].value = ''
						// })
						
						// this.fromData = collect_form
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			uploadPic(ind) {
				console.log('图片上传')
				let input = document.createElement('input')
				input.type = 'file'
				input.accept = "image/jpg,image/jpeg,image/png"
				input.addEventListener("change", async (e) => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
			
					const file = e.target.files[0];
					const _file = await shrinkImage(file, {
						quality: 80
					});
					let formData = new FormData();
					formData.append('file', _file);
					this.$api.userUpload(formData, (res) => {
						loading.close()
						if (res.code == 0) {
							this.fromData[ind].value = res.data.path
						} else {
							this.$message.error(res.msg);
						}
					})
				})
				input.click()
			
			}
		}
	}
</script>

<style scoped lang="less">
	*{
		box-sizing: border-box;
	}
	.header{
		width: 100%;
		height: 0.9rem;
		position: fixed;
		top: 0;
		background: var(--theme-main-bg-color);
		left: 0;
	    border-bottom: 0.01rem solid var(--theme-color-line);
		z-index: 100;
		padding: 0 .1rem 0 .2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header .left{
		font-size: .24rem;
		height: 0.8rem;
		width: 0.8rem;
		display: flex;
		align-items: center;
		color: var(--theme-text-color);
		cursor: pointer;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.34rem;
		font-size: .3rem;
		margin-top: -0.014rem;
		color:#fff;
		text-align: center;
	}
	.header .right{
		height: 0.8rem;
		width: 0.8rem;
	}
	.con{
		margin-top: .9rem;
		padding: 15px;
		// background: var(--theme-top-nav-bg);;
		font-size: 20px;
		color: #ffffff;

		height: 100vh;
		overflow-y: scroll;
		padding-bottom: 4rem;
	}
	/deep/.con *{
		font-size: 12px!important;
	}
	/deep/.con table{
		width: 100%!important;
	}
	.conpc{
		margin-top: 10px;
		padding: 15px;
		// background: var(--theme-top-nav-bg);;
		font-size: 20px;
		color: #ffffff;
	}
	/deep/.conpc table{
		width: 100%!important;
	}
	.bottom{
		width: 100%;
		align-items: center;
		display: flex;
		padding: 0.2rem;
		border-top: 1px solid var(--theme-color-line);
	}
	.bottombox{
		width: 100%;
		height: 100%;
		overflow-x: scroll;
	}
	.list{
		width: auto;
		height: 100%;
		overflow-x: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.item{
		width: 94.2857px;
		margin-right: 10px;
	}
	.top{
		border: .01rem solid transparent;
		position: relative;
		border-radius: 0.05rem;
		height: 0.9rem;
		padding: 0 .05rem;
		width: 1.88rem;
	}
	.top.select{
		border: .01rem solid var(--theme-primary-color);
	}
	.top img{
		height: 0.8rem;
		width: 1.78rem;
	}
	.icons{
		width: 0.3rem;
		height: 0.3rem;
		line-height: .3rem;
		overflow: hidden;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.gou{
		bottom: 2px;
		color: #ffffff;
		height: 0.096rem;
		position: absolute;
		right: 0;
		width: 0.125rem;
	}
	.bg{
		color: var(--theme-primary-color);
		height: 120%;
		width: 120%;
	}
	.down{
		width: 100%;
		line-height: 1.2;
		font-size: .18rem;
		margin-top: 0.1rem;
		text-align: center;
		color:var(--theme-alt-neutral-2);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dowm.select{
		color:var(--theme-primary-color);
	}
	
	.inputlabel{
		font-size: 14px;
		color: var(--theme-text-color-darken);
		font-weight: 300;
		margin-bottom: 10px;
		margin-top: 23px;
	}
	.inputbox .el-input__prefix{
		left: 14px!important;
		top: 4px!important;
	}
	.inputbox .el-input__inner{
		width: 100%!important;
		border: 1px solid var(--theme-color-line)!important;
		border-radius: 7px!important;
		padding: 0 30px!important;
	}
	.upload_box1{
		width: 140px;
		height: 140px;
		background-color: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		border-radius: 7px;
		color: var(--theme-text-color-darken);
		position: relative;
		overflow: hidden;
		
		i {
			line-height: 140px;
			font-size: 28px;
			text-align: center;
			display: block;
		}
		
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.btn{
		width: 100%;
		height: 43px;
		text-align: center;
		line-height: 43px;
		background-color: var(--theme-primary-color);
		margin-bottom: 15px;
		color: #fff;
		font-size: 15px;
		border-radius: 10px;
		cursor: pointer;
		margin-top: 15px;
	}
	.pc_conboxs{
		.bottom{
			width: 100%;
			align-items: center;
			display: flex;
			padding: 15px;
			border-top: 1px solid var(--theme-text-color);
		}
		.bottombox{
			width: 100%;
			height: 100%;
			overflow-x: scroll;
		}
		.list{
			width: auto;
			height: 100%;
			overflow-x: auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.item{
			width: 228px;
			height: 112px;
			margin-right: 10px;
		}
		.item:nth-child(3n){
			margin-right: 10px;
		}
		.top{
			border: 1px solid transparent;
			position: relative;
			border-radius: 7px;
			height: 112px;
			padding: 7px;
			width: 228px;
		}
		.top.select{
			border: 1px solid var(--theme-primary-color);
		}
		.top img{
			height: 100%;
			width: 100%;
			margin-left: 0;
		}
		.icons{
			width: 23px;
			height: 23px;
			line-height: 23px;
			overflow: hidden;
			position: absolute;
			right: 0;
			bottom: 0;
		}
		.gou{
			bottom: 3px;
			color: #ffffff;
			height: 7px;
			position: absolute;
			right: 0;
			width: 10px;
		}
		.bg{
			color: var(--theme-primary-color);
			height: 120%;
			width: 120%;
		}
	}
	.scrollbar-flex-content {
	  display: flex;
	}
	.scrollbar-demo-item {
	  flex-shrink: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100px;
	  height: 50px;
	  margin: 10px;
	  text-align: center;
	  border-radius: 4px;
	  background: var(--el-color-danger-light-9);
	  color: var(--el-color-danger);
	}
	
	.balance_adress_box {
		padding-top: 0.3rem;
	
		.adress_desc {
			font-size: .18rem;
			color: var(--theme-text-color-darken);
			font-weight: 300;
			margin-bottom: 0.1rem;
	
			span {
				display: block;
				line-height: 0.5rem;
			}
	
			.copy {
				display: block;
				background: var(--theme-active-bg-color);
				height: .5rem;
				padding: 0 .1rem;
				border-radius: .1rem;
				line-height: 0.5rem;
				font-style: normal;
			}
		}
	}
	.upload_box {
		width: 2rem;
		height: 2rem;
		background-color: var(--theme-main-bg-color);
		border: .02rem solid var(--theme-color-line);
		border-radius: 0.1rem;
		color: var(--theme-text-color-darken);
		position: relative;
		overflow: hidden;
	
		i {
			line-height: 2rem;
			font-size: .4rem;
			text-align: center;
			display: block;
		}
	
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.recharge_btn {
		border-radius: 0.14rem;
		font-size: .24rem;
		height: 0.7rem;
		background-color: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
		text-align: center;
		line-height: 0.7rem;
		margin: 0.3rem 0;
	}
	.newaddbox{
		width: 100%;
		padding: 0 0.2rem;
		margin-top: 0.2rem;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #071026;
	
	}
	
	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}
	
	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem;
	}
	.zzccon1{
		padding:.2rem .07rem 0 .2rem;
	}
	
	.zzctext {
		font-size: .22rem;
		font-weight: 700;
		color: #ffffff;
		line-height: 1.4;
		text-align: center;
	}
	
	.zzctext1 {
		color: var(--theme-text-color);
		font-size: .24rem;
		margin: 0.3rem 0 0.65rem;
		text-align: center;
	}
	
	.zzcbtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}
	
	.zzcbtn1 {
		flex: 1;
		font-size: .24rem;
		height: 0.7rem;
		line-height: 0.7rem;
		background-color: transparent;
		border: 1px solid;
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-color);
		border-radius: 0.14rem;
		padding: 0 0.1rem;
	}
	
	.zzcbtn2 {
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: 0.7rem;
		margin-left: 0.3rem;
		flex: 1;
		border-radius: 0.14rem;
		padding: 0 0.1rem;
	}
	.zzctext2{
		width: 100%;
		font-size: .22rem;
		font-weight: 700;
		color: #fff;
		text-align: center;
	}
	.zzccon1 li{
		width: 100%;
		height: 1rem;
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--theme-color-line);
	}
	.zzccon1 li:first-child{
		border-top: 1px solid var(--theme-color-line);
	}
	.zzccon1 ul{
		max-height: 265px;
		overflow-y: scroll;
		margin-top: 0.21rem;
		padding-right: .13rem;
	}
	.zzcleft{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>